<svg width="800" height="600">
  <circle cx="50" cy="50" r="10" fill="red" id="myCircle1"></circle>
  <circle cx="50" cy="100" r="10" fill="red" id="myCircle2"></circle>
</svg>
<script>
  const log = console.log;
  const circle1 = document.getElementById('myCircle1');
  const circle2 = document.getElementById('myCircle2');

  let start = null;
  let count = 0; //统计动画共有多少帧
  function step(timestamp, circle) {
    if (!start) {
      start = timestamp;
    }
    let progress = timestamp - start;
    let dx = Math.min(progress / 10, 600);
    circle.setAttribute('cx', dx);
    if (progress < 6000) {
      count++;
      // 在浏览器下次重绘之前继续更新下一帧动画
      window.requestAnimationFrame((timestamp) => {
        step(timestamp, circle)
      });
    } else {
      log(progress);
      log(count);
    }
  }

  window.requestAnimationFrame((timestamp) => step(timestamp, circle1)); //不会阻塞后面语句执行
  window.requestAnimationFrame((timestamp) => step(timestamp, circle2));
</script>